<template>
   <view>
      <Headernav-music></Headernav-music>
      <view class="list-head">
        <view class="list-head-img">
          <image :src="playlist.coverImgUrl" mode=""></image>
          <text class="iconfont iconyousanjiao">{{ playlist.playCount  }}</text>
        </view>
        <view class="list-head-text">
          <view>{{ playlist.name }}</view>
          <view>{{ playlist.description }}</view>
        </view>
      </view>
      <scroll-view scroll-y="true" class="scroll-Y">
        <view v-show="isShow" class="list-music-title" @tap="playAll">
          <text class="iconfont iconbofang1"></text>
          <text>播放全部</text>
          <text>(共{{ playlist.trackCount }}首)</text>
        </view>
        <view class="list-music">
          <view class="list-music-item" 
            v-for="(item, index) in playlist.tracks" 
            :key="item.id" 
            @tap="handleSongClick(item.id)"
            :class="{'active': currentSongId === item.id}"
          >
            <view class="list-music-top">{{ index + 1 }}</view>
            <view class="list-music-song">
              <view>{{ item.name }}</view>
              <view class="list-music-artist">{{ formatArtists(item.ar || item.artists) }}</view>
            </view>
            <text class="list-music-icon" :class="currentSongId === item.id ? 'playing' : ''">
              <text v-if="currentSongId === item.id" class="iconfont icon-yinlezhong"></text>
              <text v-else class="iconfont icon-yinlebofangqi"></text>
            </text>
          </view>
        </view>
        
        <!-- 底部空白，防止内容被底部导航栏遮挡 -->
        <view class="list-footer-space"></view>
      </scroll-view>
    </view>
  </template>
  
 <script>
 import { list } from '../../common/api.js';
 
 export default {
   data() {
     return {
       title: "榜单列表",
       playlist: {
         coverImgUrl: '',
         trackCount: '',
         creator: ''
       },
       privileges: [],
       isShow: false,
       currentSongId: null // 当前播放的歌曲ID
     };
   },
   onLoad(options) {
     const listid = options.listid;
     this.fetchPlaylist(listid);
     
     // 检查是否有正在播放的歌曲ID (可以通过全局状态或存储获取)
     try {
       const playingInfo = uni.getStorageSync('playing_song_info');
       if (playingInfo) {
         this.currentSongId = playingInfo.id;
       }
     } catch (e) {
       console.error('获取播放状态失败', e);
     }
   },
   methods: {
     fetchPlaylist(listid) {
       list(listid)
         .then((res) => {
           if (res.data.code === 200) {
             this.title = res.data.playlist.name;
             this.playlist = res.data.playlist;
             // 检查并过滤重复的歌曲id
             const uniqueTracks = [];
             const trackIds = new Set();
             this.playlist.tracks.forEach((track) => {
               if (!trackIds.has(track.id)) {
                 uniqueTracks.push(track);
                 trackIds.add(track.id);
               }
             });
             this.playlist.tracks = uniqueTracks;
             this.privileges = res.data.privileges;
             this.isShow = true;
           } else {
             console.error('获取歌单信息失败:', res.data);
           }
         })
         .catch((err) => {
           console.error('请求出错:', err);
         });
     },
     handleSongClick(id) {
       console.log('点击的歌曲id:', id);
       this.currentSongId = id; // 更新当前播放的歌曲ID
       
       // 保存当前播放信息到存储中，方便其他页面使用
       try {
         uni.setStorageSync('playing_song_info', {
           id: id,
           listId: this.playlist.id
         });
       } catch (e) {
         console.error('保存播放状态失败', e);
       }
       
       this.navPlayer(id);
     },
     navPlayer(id) {
       uni.navigateTo({
         url: `/pages/player/player?songId=${id}`
       });
     },
     playAll() {
       // 播放列表中的第一首歌
       if (this.playlist.tracks && this.playlist.tracks.length > 0) {
         const firstSongId = this.playlist.tracks[0].id;
         this.handleSongClick(firstSongId);
       }
     },
     formatArtists(artists) {
       if (!artists) return '未知艺术家';
       return artists.map(artist => artist.name).join(', ');
     }
   }
 };
 </script>
<style>
.list-head {
  display: flex;
  margin: 30rpx;
}

.list-head-img {
  width: 265rpx;
  height: 265rpx;
  border-radius: 15rpx;
  margin-right: 40rpx;
  overflow: hidden;
  position: relative;
}

.list-head-img image {
  width: 100%;
  height: 100%;
}

.list-head-img text {
  position: absolute;
  font-size: 26rpx;
  color: white;
  right: 8rpx;
  top: 8rpx;
}

.list-head-text {
  flex: 1;
  font-size: 24rpx;
  color: #c3d1e3;
}

.list-head-text image {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
}

.list-music {
  background: white;
  border-radius: 20rpx;
  overflow: hidden;
  margin: 45rpx 30rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.list-music-item {
  display: flex;
  margin: 0 30rpx;
  padding: 20rpx 0;
  align-items: center;
  border-bottom: 1rpx solid #eee;
  transition: all 0.3s ease;
}

.list-music-item:last-child {
  border-bottom: none;
}

.list-music-item:active {
  background-color: #f0f0f0;
}

.list-music-item.active {
  background-color: #f5f9ff;
}

.list-music-top {
  width: 56rpx;
  font-size: 28rpx;
  color: #979797;
}

.list-music-song {
  flex: 1;
  line-height: 40rpx;
}

.list-music-artist {
  font-size: 24rpx;
  color: #999;
  margin-top: 6rpx;
}

.list-music-icon {
  width: 60rpx;
  text-align: center;
  color: #b2b2b2;
}

.list-music-icon.playing {
  color: #1e88e5;
}

.scroll-Y {
  height: 700rpx;
}

.list-music-title {
  height: 58rpx;
  line-height: 58rpx;
  margin: 30rpx 30rpx 70rpx 30rpx;
  display: flex;
  align-items: center;
  color: #333;
}

.list-music-title text {
  margin-right: 8rpx;
}

.list-footer-space {
  height: 100rpx;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.icon-yinlezhong {
  animation: pulse 1.5s infinite ease-in-out;
  display: inline-block;
}
</style>